<template>
	<view class="coin-charge-container">
		<Nav :bgColor="bgColor" title="代币购买" @back="back"></Nav>
		<view class="flex align-center rest">
			<text class="rest-icon"></text>
			<text class="rest-label">当前余额</text>
		</view>
		<view class="flex align-center justify-between rest-info">
			<text class="coin-icon"></text>
			<text class="rest-value">16856</text>
			<navigator url="/magicpages/coin_record/coin_record" class="record-link">交易记录 ></navigator>
		</view>
		<view class="charge-wrapper">
			<radio-group @change="radioChange">
				<view class="label">
					本次购买所需
				</view>
				<view class="charge-item flex">
					<image class="charge-item-icon" src="" mode=""></image>
					<view class="charge-item-info flex justify-between align-center">
						<view class="flex flex-column">
							<text class="name">822个魔星代币</text>
							<text class="flex align-end">
								<text class="unit">￥</text>
								<text class="price">88.20</text>
							</text>
						</view>
						<radio color="#6E24FF" :value="selectItem.value" :checked="selectItem.id === current" />
					</view>
				</view>
				<view class="label">更多购买组合</view>
				<view class="charge-list">
					<view class="charge-more-item flex" v-for="(item, index) in chargeList" :key="item.value">
						<image class="charge-item-icon" src="" mode=""></image>
						<view class="charge-item-info flex justify-between align-center"
							:class="index==chargeList.length-1?'remove-line':''">
							<view class="flex flex-column">
								<text class="name">822个魔星代币</text>
								<text class="flex align-end">
									<text class="unit">￥</text>
									<text class="price">88.20</text>
								</text>
							</view>
							<radio color="#6E24FF" :value="item.value" :checked="item.id === current" />
						</view>
					</view>
				</view>
			</radio-group>
		</view>
		<view class="pay-info">
				<view class="flex justify-between align-center">
					<text class="pay-label">支付即同意《魔星用户协议》</text>
					<radio color="#6E24FF" :checked="ruleCheck" @click="ruleCheck=!ruleCheck" />
				</view>
				<view class="pay-btn">￥ 82.20 确认支付</view>
		</view>
	</view>
</template>

<script>
	import Nav from "@/components/magic-box/magic-nav/index.vue"
	import navMixin from "@/common/js/nav.js"
	export default {
		mixins: [navMixin],
		components: {
			Nav
		},
		data() {
			return {
				ruleCheck: false,
				selectItem: {
					value: 1,
					id: 0
				},
				chargeList: [{
					value: 2,
					id: 1
				}, {
					value: 3,
					id: 2
				}, {
					value: 4,
					id: 3
				}, {
					value: 5,
					id: 4
				}],
				current: 0
			};
		},
		methods: {
			radioChange(event) {
				console.log("event", event)
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #E9EBF9;
	}
	.coin-charge-container /deep/ uni-radio .uni-radio-input-checked {
		background-color: #6E24FF !important;
		border-color: #6E24FF !important;
	}

	.coin-charge-container {
		position: relative;
		padding-bottom: 261rpx;
		box-sizing: border-box;
		.rest {
			margin-top: 28rpx;

			.rest-icon {
				margin-right: 16rpx;
				width: 72rpx;
				height: 26rpx;
				background: url("~@/static/image/rest-icon.png");
				background-size: 100% 100%;
			}

			.rest-label {
				font-size: 25rpx;
				color: #000000;
			}
		}

		.rest-info {
			padding: 0 22rpx 0 24rpx;
			margin-top: 24rpx;

			.coin-icon {
				width: 46rpx;
				height: 44rpx;
				background: url("~@/static/image/money.png");
				background-size: 100% 100%;
			}

			.rest-value {
				margin: 0 auto 0 19rpx;
				font-weight: bold;
				color: #000000;
			}

			.record-link {
				font-size: 22rpx;
				font-weight: 400;
				color: #232323;
				line-height: 50rpx;
				text-align: center;
				width: 150rpx;
				height: 50rpx;
				border: 1rpx solid #232323;
				border-radius: 25rpx;
			}
		}

		.charge-wrapper {
			margin-top: 56rpx;
			padding: 0 22rpx;

			.label {
				font-size: 25rpx;
				font-weight: 500;
				color: #000000;
			}

			.charge-item {
				margin-top: 13rpx;
				margin-bottom: 42rpx;
				padding: 21rpx;
				background: #FFFFFF;
				border-radius: 11rpx;
			}

			.charge-item-icon {
				flex-shrink: 0;
				width: 111rpx;
				height: 111rpx;
				background-color: #EEEEEE;
				border-radius: 6px;
			}

			.charge-item-info {
				padding-top: 10rpx;
				margin-left: 21rpx;
				flex: 1;

				.name {
					margin-bottom: 15rpx;
					font-size: 25rpx;
					line-height: 25rpx;
					color: #000000;
				}

				.unit {
					margin-right: 5rpx;
					font-size: 25rpx;
					line-height: 25rpx;
					color: #000;
					font-weight: bold;
				}

				.price {
					font-size: 33rpx;
					line-height: 33rpx;
					color: #000;
					font-weight: bold;
				}
			}

			.charge-list {
				padding: 21rpx 0;
				margin-top: 13rpx;
				background: #FFFFFF;
				border-radius: 11rpx;
			}

			.charge-more-item {
				padding: 21rpx;
				background: #FFFFFF;

				.charge-item-info {
					padding-bottom: 42rpx;
					border-bottom: 1rpx solid rgba($color: #000000, $alpha:0.2);
				}

				.remove-line {
					border-bottom: none;
				}
			}

		}
		.pay-info{
			padding: 35rpx 22rpx 55rpx;
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 233rpx;
			background: #FFFFFF;
			border-radius: 33rpx 33rpx 0px 0px;
			box-sizing: border-box;
		}
		.pay-label{
			font-size: 25rpx;
			color: #232323;
		}
		.pay-btn{
			margin-top: 35rpx;
			height: 83rpx;
			background: linear-gradient(90deg, #5F20FF 0%, #1AD7FF 100%);
			border-radius: 11rpx;
			font-size: 28rpx;
			line-height: 83rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}
</style>
